<template>
  <div class="header-area">
    <div class="left">
      <i class="iconfont" :class="geticonclass" @click="handcollage"></i>
      <BreadCrumb></BreadCrumb>
    </div>
    <div class="right">
      <Driver></Driver>
      <Screenfull></Screenfull>
      <Clang></Clang>
      <Avater></Avater>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

import { headerStore } from '../../../store/head'

import BreadCrumb from '@/components/BreadCrumb.vue'
import Driver from '@/components/driver/index.vue'
import Screenfull from '@/components/Screenfull.vue'
import Clang from '@/components/Clang.vue'
import Avater from '@/components/Avater.vue'
export default defineComponent({
  components: {
    BreadCrumb,
    Avater,
    Clang,
    Screenfull,
    Driver
  },
  setup() {
    const header = headerStore()
    const handcollage = () => {
      header.changeiscol()
    }
    const geticonclass = computed(() => {
      return header.iscol ? 'icon-zhankai' : 'icon-shousuo'
    })
    return {
      handcollage,
      geticonclass
    }
  }
})
</script>

<style lang="scss" scoped>
@import url('../../../assets/headfont/iconfont.css');
.header-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 49px;
  .left {
    display: flex;
    align-items: center;
    i {
      margin-right: 20px;
      font-size: 32px;
    }
  }
  .right {
    display: flex;
    align-items: center;
  }
}
</style>
